<template>
  <div class="h-full container">
    <div class="list-container">
      <div class="child-list-container" id="list1">
        <img class="list" :src="require('@/assets/page5/list1.png')" alt="" />
        <img
          class="arrow"
          v-if="arrow1"
          :src="require('@/assets/page5/arrow.png')"
          alt=""
        />
      </div>
      <div class="child-list-container" id="list2">
        <img class="list" :src="require('@/assets/page5/list2.png')" alt="" />
        <img
          v-if="arrow2"
          class="arrow arrow2"
          :src="require('@/assets/page5/arrow.png')"
          alt=""
        />
      </div>
    </div>
    <img
      class="slogon center"
      :src="require('@/assets/page5/slogon.png')"
      alt=""
    />
    <div class="form-container center">
      <div class="input-wrapper flex">
        链接：<input type="text" class="flex-1" v-model="form.shareUrl" />
      </div>
      <div class="input-wrapper flex">
        姓名：<input type="text" class="flex-1" v-model="form.userName" />
      </div>
      <div class="input-wrapper flex">
        电话：<input type="text" class="flex-1" v-model="form.userMobile" />
      </div>
      <img class="text1" :src="require('@/assets/page5/text1.png')" alt="" />
    </div>

    <img
      class="submit-btn center"
      @click="handleSumbit"
      :src="require('@/assets/submit_btn.png')"
      alt=""
    />
    <InsiBtn />
    <Page6 :visiable.sync="page6"></Page6>
  </div>
</template>

<script>
import Page6 from './Page6.vue';
import InsiBtn from './InsiBtn';
import service from '@/service';
import { encode } from 'js-base64';
export default {
  name: '',
  components: {
    Page6,
    InsiBtn,
  },
  data() {
    return {
      arrow1: true,
      arrow2: true,
      page6: false,
      form: {
        userName: '',
        userMobile: '',
        shareUrl: '',
      },
    };
  },
  created() {
    if (this.$route.params.page6) {
      this.page6 = true;
    }
  },
  mounted() {
    let that = this;
    document.getElementById('list1').addEventListener('scroll', (e) => {
      if (e.target.scrollLeft > 0) {
        that.arrow1 = false;
      } else {
        that.arrow1 = true;
      }
    });
    document.getElementById('list2').addEventListener('scroll', (e) => {
      console.log(e.target.scrollLeft);
      if (e.target.scrollLeft > 0) {
        that.arrow2 = false;
      } else {
        that.arrow2 = true;
      }
    });
  },
  methods: {
    validate() {
      if (!this.form.shareUrl) {
        this.$toast('请填写链接', {
          durtaion: 200,
        });
        return false;
      }
      if (!this.form.userName) {
        this.$toast('请填写姓名', {
          durtaion: 200,
        });
        return false;
      }
      if (!this.form.userMobile) {
        this.$toast('请填写电话', {
          durtaion: 200,
        });
        return false;
      }
      if (!this.isPoneAvailable(this.form.userMobile)) {
        this.$toast('电话号码格式不正确', {
          durtaion: 200,
        });
        return false;
      }

      return true;
    },
    handleSumbit() {
      if (this.validate()) {
        this.form.shareUrl = encode(this.form.shareUrl);
        service.saveUserInfo(this.form).then((res) => {
          if (res) {
            this.page6 = true;
          }
        });
      }
    },
    isPoneAvailable(telephone) {
      var myreg = /^1[0-9]{10}$/;

      if (!myreg.test(telephone)) {
        console.log(telephone);
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import '../styles/function.scss';
.container {
  // background:#f0f3f5;
}
.list-container {
  padding-top: switchwidth(56);
  position: relative;
}
.list {
  height: 150px;
}
.arrow {
  height: 30px;
  top: 85px;
  position: fixed;
  right: 5px;
  &.arrow2 {
    top: 225px;
  }
}
.slogon {
  width: switchwidth(900);
  margin-top: switchwidth(81);
  margin-bottom: switchwidth(105);
}
.text1 {
  width: switchwidth(530);
}
.submit-btn {
  margin-bottom: switchwidth(101);
  margin-top: switchwidth(57);
}
.form-container {
  width: switchwidth(716);
}
.input-wrapper {
  height: switchwidth(86);
  line-height: switchwidth(86);
  border: 1px solid #fa8d9e;
  border-radius: 7px;
  color: #686868;
  padding-left: switchwidth(23);
  padding-right: switchwidth(23);
  margin-bottom: switchwidth(66);
  input {
    border: none;
    outline: none;
    background: transparent;
  }
}
.child-list-container {
  width: 100vw;
  overflow: scroll;
  position: relative;
}
</style>
